<template>
  <div class="d2">
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="imgfor">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image.carouselUrl" class="forimg" @click="img(image)" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <van-swipe class="my-swipe"  indicator-color="white">
        <van-swipe-item>
          <div v-for="(v,index) in fenlei" :key="index" class="fenlei">
           <img :src="v.src" style="width:30px;height:30px;margin:auto">
           {{v.pname}}
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div v-for="(v,index) in fenlei" :key="index" class="fenlei">
            <img :src="v.src" style="width:30px;height:30px;margin:auto">
             {{v.pname}}
          </div></van-swipe-item>
        <van-swipe-item>
          <div v-for="(v,index) in fenlei" :key="index" class="fenlei">
            <img :src="v.src" style="width:30px;height:30px;margin:auto">
             {{v.pname}}
          </div></van-swipe-item>
        <van-swipe-item>
          <div v-for="(v,index) in fenlei" :key="index" class="fenlei">
            <img :src="v.src" style="width:30px;height:30px;margin:auto">
             {{v.pname}}
          </div>
        </van-swipe-item>
</van-swipe>

        <div class="d1" v-for="(v, index) in list" :key="index">
          <img :src="v.avaUrl" class="img" @click="jump(v)" v-lazy="v.avaUrl" />
          <p>{{ v.phone }}</p>
          <p>{{ v.age }}</p>
          <!--<button @click="page(v)">购物车</button>-->
          <van-button size="small" round type="info" color="linear-gradient(to right, #ff6037, #ee0a24)">购物车</van-button>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import Url from "../tools/Url";
export default {
  name: "list02",

  data() {
    return {
      list: [],
      pages: 1,
      loading: false,
      finished: false,
      count: 0,
      isLoading: false,
      images: [],
      fenlei:[]
    }
  },
  methods: {
    page(v) {
      this.$store.commit("addP", v);
    },
    jump(s) {
      this.$router
        .push({
          //2、进行传参
          path: "/detial",
          query: {
            sid: s,
          },
        })
        .catch((e) => {});
    },
    onLoad() {
      //   异步更新数据
      //   setTimeout 仅做示例，真实场景中一般为 ajax 请求
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pages}&pageSize=10`;
      this.axios.post(Url.LIST_URL, str).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.loading = false;
          res.data.data.list.forEach((item, index, arr) => {
            item.count = 1;
            item.isCheck = false;
          });

          this.list = this.list.concat(res.data.data.list);
          this.pages++;
          if (res.data.isLastPage) {
            this.finished = true;
          }
        } else {
          this.$router.push("/rester");
        }
      });
    },
    onRefresh() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pages}&pageSize=10`;
      this.axios.post(Url.LIST_URL, str).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          res.data.data.list.forEach((item, index, arr) => {
            item.count = 1;
            item.isCheck = false;
          });
          this.count++;
          this.isLoading = false;
          this.list = res.data.data.list.concat(this.list);
          if (res.data.isLastPage) {
            this.finished = true;
          }
          this.pages++;
        } else {
          this.$router.push("/rester");
        }
      });
    },
    img(v){
     this.$router.push({
          //2、进行传参
          path: "/miuse",
          query: {
            sid: v,
          },
        }).catch((e) => {});
        
      
    }
  },

  // 加载状态结束

  // 数据全部加载完成

  mounted() {
    // var list =  [{src:require("../assets/maimai.png"),pname:"外卖"},
    //              {src:require("../assets/meishi.png"),pname:"美食"},
    //              {src:require("../assets/jiudian.png"),pname:"酒店"},
    //              {src:require("../assets/meifa.png"),pname:"美发"},
    //              {src:require("../assets/jianshen.png"),pname:"健身"},
    //              {src:require("../assets/chongwu.png"),pname:"宠物"},
    //              {src:require("../assets/jingdian.png"),pname:"景点"},
    //              {src:require("../assets/qinzi.png"),pname:"亲子"}]
    //   this.fenlei = list;
    //     var token = sessionStorage.getItem("token");
    // var str = `token=${token}&pageNo=${this.page}&pageSize=10`;
    // this.axios
    //   .post("https://bufferc.store:8443/user/getUserList", str)
    //   .then((res) => {
    //     console.log(res);
    //   if(res.data.code==200){
    //     res.data.data.list.forEach((item, index, arr) => {
    //       item.count = 1;
    //       item.isCheck = false;
    //     });
    //     this.list = this.list.concat(res.data.data.list);
    //   }else{
    //     this.$router.push("/Login");
    //   }
    // });
    //   this.list=list;
    //   list.forEach((elem,index,arr)=>{
    //       elem.count=1,
    //       elem.isCheck=false;
    //   })

     var token = sessionStorage.getItem("token");
      var str = `token=${token}`;
      this.axios.post("http://123.57.130.65:8080/carousel/findAll", str).then(res => {
        console.log(res);
        console.log("完成");
        if(res.data.code==200){
          this.images=res.data.data;
          
        }else{
          this.$router.push("/regist");
        }
      })

  },
}
</script>
<style lang="">
.d1 {
  margin: 10px 10px;

  width: 165px;
  height: 220px;
  display: inline;
  flex-wrap: wrap;
  float: left;
  box-shadow: 0px 1px 7px 2px #e6dada;
  background-color: #fff5ea;
}

.d2 {
  text-align: center;
  display: flex;
  background-color: #fbfef9 !important;
  margin-top: 35px;
}
/* .but{
       border:1px solid black ;
       width: 100px;
      display: inline;
        
   } */
.img {
  width: 100px;
  height: 100px;
}
.vant-list {
  width: 400px;
}
.imgfor{
  width: 381px;
  height: 200px;
}
.forimg{
  width: 381px;
  height: 200px;
  
}
.van-swipe-item{
  display: flexed;
}
.fenlei{
     width: 43px;
    height: 54px;
    margin: 13px 25px;
   
    display: inline;
    -ms-flex-wrap: wrap;
    float: left;
    flex-wrap: wrap;
    font-size: 12px;
    text-align: center;
            
}
</style>